<template>
  <div class="page-container container">
    <div class="in-container search-form-box">
      <paymentDetailsSummarySearchForm
        @search="search($event)"
        @reset="reset($event)"
      >
      </paymentDetailsSummarySearchForm>
    </div>
    <div class="in-container table-box">
      <div class="btn-box">
        <el-button size="small" type="primary" @click="exportExcel">
          导出EXECL
        </el-button>
      </div>
      <AppPageTable
        class="table"
        stripe
        :data="tableData.data"
        :autostyle="'height: calc(100% - 40px) ;'"
        :option="tableData.option"
        @change="getTableData()"
      >
        <el-table-column label="实付单号" prop="doccode"> </el-table-column>
        <el-table-column label="业务单号" prop="workdoccode"> </el-table-column>
        <el-table-column label="提单号" prop="blNo"> </el-table-column>
        <el-table-column label="单位名称" prop="entFullname"> </el-table-column>
        <el-table-column label="实收日期" prop="docdate"> </el-table-column>
        <el-table-column label="收/付" prop="isIncome"> </el-table-column>
        <el-table-column label="费用名称" prop="feeName"> </el-table-column>
        <el-table-column label="币种" prop="currency"> </el-table-column>
        <el-table-column label="应付金额" prop="yfmoney"> </el-table-column>
        <el-table-column label="销账金额" prop="xzmoney"> </el-table-column>
        <el-table-column label="已销金额" prop="yxmoney"> </el-table-column>
        <el-table-column label="未销金额" prop="wxmoney"> </el-table-column>
        <el-table-column label="业务员" prop="userName"> </el-table-column>
        <el-table-column label="备注" prop="feeMemo"> </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import paymentDetailsSummarySearchForm from "./components/paymentDetailsSummarySearchForm.vue";
import selectDown from "./components/selectDown.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import { fileDownload } from "@/public/publicUtils"
export default defineComponent({
  components: {
    paymentDetailsSummarySearchForm,
    selectDown,
    AppPageTable,
  },
  data() {
    return {
      query: {
        code: undefined, //实收单号
        workdoccode: undefined, //业务单号
        salesId: undefined, //业务员
        entFullname: undefined, //单位名称
        currency: undefined, //币种
        invoiceCode: undefined, //发票号
        docdate: [], // 收款日期
        status: 99, // 开票状态
        memo: undefined,
        price1: undefined,
        price2: undefined,
      },
      tableData: {
        data: [],
        option: useTableOption(),
      },
    };
  },
  methods: {
    search(queryData) {
      this.query = queryData;
      this.tableData.option.page = 1;
      this.getTableData();
    },
    reset(queryData) {
      this.query = queryData;
      this.tableData.option.page = 1;
      this.getTableData();
    },
    exportExcel(){
      // fileDownload("").then(() => {

      // }).catch(err => {
      //   ElMessage.warning("文件导出失败");
      // });
    },
    getTableData() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/report/getPayDetails", {
          ...this.query,
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
        })
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => (this.tableData.option.loading = false));
    },
  },
  mounted() {
    this.getTableData()
  },
});
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;

  :deep(.el-date-editor) {
    width: 100%;
  }
  :deep(.el-select) {
    width: 100%;
  }
  .search-form-box {
    height: auto;
    margin-bottom: 8px;
  }
  .table-box {
    flex: 1;
    .btn-box {
      margin-bottom: 8px;
    }
  }
}
</style>
